<template>
  <div class="transQuery_main">
    <a-card :bordered="false" title="扣款明细下载">
      <a-form class="formClass">
        <!-- <a-form-item v-bind="formItemLayout" label="会员编号">
          <a-input v-model="data.memberNo" placeholder="请输入会员编号" />
        </a-form-item> -->
        <a-row>
          <a-form-item label="扣款开始日期" v-bind="formItemLayout">
            <a-range-picker
              :disabledDate="disabledDate"
              style="width: 100%"
              :locale="zh_CN"
              format="YYYY-MM-DD"
              @change="onChange"
              @calendarChange="calendarPriceRangeChange"
              v-model="withdrawDate"
              :allowClear="isClear"
            />
          </a-form-item>
        </a-row>
        <a-row>
          <a-col :span="4"></a-col>
          <a-col :span="12" :offset="1">
            <a-form-item>
              <a-button
                type="primary"
                :loading="loading"
                @click="downLoadFile()"
                >下载报表</a-button
              >
              <a-button
                type="primary"
                style="margin-left: 3vw"
                @click="listTable()"
                >刷新</a-button
              >
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        class="tableClass"
        :columns="columns"
        :dataSource="monthList"
        size="small"
        :pagination="false"
        :rowKey="(record) => record.downloadToken"
      >
        <span slot-scope="record" slot="action">
          <span
            style="color: #25a2e4; cursor: pointer"
            @click="downloadItem(record.downloadToken, record.uploadFileName)"
            >下载</span
          >
        </span>
      </a-table>
      <a-pagination
        class="tableClass"
        @change="onPageChange"
        :current="pagination.current"
        :total="pagination.total"
        :pageSize="query.pageSize"
        style="margin-top: 10px; text-align: right"
      />
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: "导出时间",
    dataIndex: "ctime",
  },
  {
    title: "文件名称",
    dataIndex: "uploadFileName",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];
import ACard from "ant-design-vue/es/card/Card";
import ARow from "ant-design-vue/es/grid/Row";
import ACol from "ant-design-vue/es/grid/Col";
import HeadInfo from "../../components/tool/HeadInfo";
import AButton from "ant-design-vue/es/button/button";
import AProgress from "ant-design-vue/es/progress";
import ADropdown from "ant-design-vue/es/dropdown";
import AMenu from "ant-design-vue/es/menu/index";
import AIcon from "ant-design-vue/es/icon/index";
import AButtonGroup from "ant-design-vue/es/button/button-group";
import AInput from "ant-design-vue/es/input/Input";
import AInputSearch from "ant-design-vue/es/input/Search";
import ARadioGroup from "ant-design-vue/es/radio/Group";
import ARadio from "ant-design-vue/es/radio";
import ATable from "ant-design-vue/es/table";
import ASwitch from "ant-design-vue/es/switch";
import ADivider from "ant-design-vue/es/divider";
import APagination from "ant-design-vue/es/pagination";
import ADrawer from "ant-design-vue/es/drawer";
import ACheckboxGroup from "ant-design-vue/es/checkbox/Group";
import utils from "../../utils/utils.js";
import ASelect from "ant-design-vue/es/select/index";
import AForm from "ant-design-vue/es/form/Form";
import AFormItem from "ant-design-vue/es/form/FormItem";
import ADatePicker from "ant-design-vue/es/date-picker";
import zh_CN from "ant-design-vue/lib/date-picker/locale/zh_CN";
import moment from "moment";
const AMenuItem = AMenu.Item;
const ARadioButton = ARadio.Button;
const ASelectOption = ASelect.Option;
const ARangePicker = ADatePicker.RangePicker;
const AMonthPicker = ADatePicker.MonthPicker;

export default {
  name: "MerchantDetail",
  components: {
    ADrawer,
    ARadioButton,
    ARadio,
    ARadioGroup,
    ATable,
    AInputSearch,
    AInput,
    AButtonGroup,
    AIcon,
    AMenuItem,
    AMenu,
    ADropdown,
    AProgress,
    AButton,
    HeadInfo,
    ACol,
    ARow,
    ACard,
    ASwitch,
    ADivider,
    APagination,
    ACheckboxGroup,
    ASelect,
    ASelectOption,
    AForm,
    AFormItem,
    ARangePicker,
    ADatePicker,
    AMonthPicker,
  },

  data() {
    return {
      columns,
      zh_CN,
      isClear: false,
      withdrawDate: [],
      monthList: [],
      data: {
        startDate: "",
        endDate: "",
        requestType: "market",
      },
      query: {
        page: 1,
        pageSize: 10,
        data: { rootPath: "cut.order" },
      },
      pagination: { current: null, total: null },
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12, offset: 1 },
        },
      },
      disbaleDate:null
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.listTable();
  },
  methods: {
    moment,
    //日期不可选
    disabledDate(current) {
      // return current > moment().endOf('day');
      if (this.disbaleDate) {
        // console.log(moment(this.data.startDate).subtract(1, "year"));
        return (
          current > moment().subtract("day") ||
          current >= moment(this.disbaleDate).add(365, "day") ||
          current <= moment(this.disbaleDate).subtract(365, "day")
        );
      } else {
        return current > moment().subtract("day");
      }
    },
    //月份不可选Month
    disabledMonth(current) {
      // return current && current > moment().endOf('day');
      return current > moment().subtract(1, "day");
    },
    onChange(dates, dateStrings) {
      console.info(dateStrings);
      // this.withdrawDate = dateStrings;
      this.data.startDate = dateStrings[0] + " 00:00:00";
      this.data.endDate = dateStrings[1] + " 23:59:59";
      this.disbaleDate = null
      console.info(this.data);
      console.info(this.withdrawDate);
    },
    calendarPriceRangeChange(date) {
      this.disbaleDate = date[0];
    },
    downLoadFile() {
      if (this.withdrawDate.length == 0) {
        this.$message.warning("请输入扣款开始日期！");
        return false;
      }
      this.loading = true;
      this.$axios
        .post("/agent/cutOrder/cutOrderExcel", { data: this.data })
        .then(
          (res) => {
            console.log(res);
            this.loading = false;
            if (res.data.code == "OK") {
              this.downloadItem(res.data.data, "");
              let self = this;
              let timer = setTimeout(function () {
                self.listTable();
              }, 2000);
            } else {
              this.$message.error(res.data.message);
            }
          },
          (err) => {
            this.loading = false;
            this.$message.error(err.message);
          }
        );
    },
    // 报表下载记录表格
    listTable() {
      this.$axios
        .post("/agent/transaction/profit/excelRecord", this.query)
        .then(
          (res) => {
            console.log("res", res);
            if (res.data.code == "OK") {
              this.monthList = res.data.list;
              this.pagination.current = res.data.current;
              this.pagination.total = res.data.total;
            } else {
              this.$message.warning(res.data.message);
            }
          },
          (err) => {
            this.$message.error(err.message);
          }
        );
    },
    // 下载单个文件
    downloadItem(downloadToken, uploadFileName) {
      const a = document.createElement("a");
      a.download = uploadFileName;
      let downloadUrl = "/file/file/download/" + downloadToken;
      //let downloadUrl = "/file/file/report/" + downloadToken + '?Authorization='+ sessionStorage.getItem('token')
      console.log("downloadUrl====>" + downloadUrl);
      a.href = downloadUrl;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    onPageChange: function (page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.listTable();
    },
  },
};
</script>

<style lang="less" scoped>
@mb: margin-bottom;
@m: margin;
@p: padding;
@w: width;
@bg: #fff;
@tm: .transQuery_main;
span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  @{mb}: 20px;
}

@{tm} {
  @{p}: 30px;
  padding-top: 0px;
  background: @bg;
}

.button_sty {
  @{w}: 140px;
}

.tableClass {
  @{w}: 80%;
  @{m}: 0 auto;
}
.formClass {
  @{w}: 600px;
  @{m}: 0 auto;
}
</style>